import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:wuxu_flutter_lianxi/localization/default_localizations.dart';
import 'package:wuxu_flutter_lianxi/redux/redux_login.dart';
import 'package:wuxu_flutter_lianxi/redux/wx_state.dart';

import '../../widget/animated_background.dart';
import '../../widget/animated_particle_widget.dart';

///
/// 登录页
///
class LoginPage extends StatefulWidget {
  static String path = "login";

  const LoginPage({super.key});

  @override
  State<StatefulWidget> createState() => _LoginState();
}

class _LoginState extends State<LoginPage> {
  final _usernameController = TextEditingController()
    ..value
    ..text = "xiaotuxian001";

  final _passwordController = TextEditingController()
    ..value
    ..text = "123456";

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        //点击外部，关闭输入框
        FocusScope.of(context).requestFocus(FocusNode()); //关闭输入框的一种方式
      },
      child: Scaffold(
        body: Container(
          color: Theme.of(context).primaryColor,
          child: Stack(
            //stack 是层叠布局
            children: [
              //Positioned：定位布局
              //positioned 只能作为Stack或PositionedDirectional的子widget使用
              Positioned.fill(child: AnimatedBackground()),
              Positioned.fill(child: ParticlesWidget(30)),
              Center(
                  child: SafeArea(
                      //设定滚动，弹出键盘不遮挡
                      child: SingleChildScrollView(
                          child: Card(
                elevation: 5.0,
                margin: const EdgeInsets.only(
                    left: 20.0, right: 20.0, top: 100, bottom: 100),
                color: Colors.white,
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                child: Padding(
                  padding: const EdgeInsets.only(
                      left: 30.0, right: 30.0, top: 30, bottom: 30.0),
                  child: Column(
                    children: [
                      TextField(
                        controller: _usernameController,
                        cursorColor: Theme.of(context).primaryColor,
                        decoration: InputDecoration(
                          labelText: WxLocalizations.languageResString(context)
                              .inputHintAccount,
                          hintText: '',
                          border: OutlineInputBorder(),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).primaryColor,
                                  width: 1)),
                        ),
                        maxLength: 20,
                        keyboardType: TextInputType.name,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18),
                      ),
                      TextField(
                        controller: _passwordController,
                        cursorColor: Theme.of(context).primaryColor,
                        decoration: InputDecoration(
                          labelText: WxLocalizations.languageResString(context)
                              .inputHintPwd,
                          hintText: '',
                          border: OutlineInputBorder(),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).primaryColor,
                                  width: 1)),
                        ),
                        maxLength: 20,
                        keyboardType: TextInputType.visiblePassword,
                        obscureText: true,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18),
                      ),
                      TextButton(
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.blue),
                            // 设置背景色
                            foregroundColor:
                                MaterialStateProperty.all(Colors.white),
                            // 设置文本颜色
                            overlayColor: MaterialStateProperty.all(
                                Colors.black.withOpacity(0.1)),
                            // 设置按下时的背景色
                            textStyle: MaterialStateProperty.all(TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold)), // 设置文本样式
                          ),
                          onPressed: () {
                            _loginIn(context);
                          },
                          child: Text(
                            WxLocalizations.languageResString(context).login,
                            strutStyle: StrutStyle(
                                // 使用StrutStyle 设置行高，是文本居中对齐，否则会有对不齐的问题
                                fontSize: 18,
                                height: 1.1,
                                forceStrutHeight: true),
                          ))
                    ],
                  ),
                ),
              ))))
            ],
          ),
        ),
      ),
    );
  }

  _loginIn(BuildContext context) {
    var username =_usernameController.text;
    var password =_passwordController.text;

    print("username:$username, password:$password");
    //登录
    if (username.isEmpty) {
      Fluttertoast.showToast(msg: "请输入账号");
    } else if (password.isEmpty) {
      Fluttertoast.showToast(msg: "请输入密码");
    } else {
      StoreProvider.of<WXState>(context)
          .dispatch(LoginAction(context, username, password));
    }
  }
}
